<template>
	<view>
		<view class="bg p-4"
			:style="'background-image: url('+WEBCONFIG?.bg3+');'">
			<view class="bg-white rounded-2 box p-5 box-shadow mb-6">

				<image class="avatar" :src="dealerUser?.user.avatar">
				</image>

				<view class="text-dark-light-5 h9 mb-3">推荐人:{{dealerUser?.referee_name}}</view>
				<view class="line mb-4"></view>
				<view class="money-box rounded-2 p-6 flex flex-row  flex-y-center mb-3">
					<view class="w-70">
						<view class="h9 text-white mb-4">可提现:  {{dealerUser?.money}} 元</view>
						<view class="h9 text-white">待提现:  {{dealerUser?.freeze_money}} 元</view>
					</view>
					<view class="btn bg-white h9  flex flex-center" @click="$page.open('/pages/dealer/withdrawal/index')">去提现</view>
				</view>
				<view class="h9 ">已提现金额:{{dealerUser?.total_money- dealerUser?.money}}(元)</view>
			</view>

			<view class="box-shadow p-5 rounded-3">
				<uni-grid :column="4" :showBorder="false" :square="false">
					<uni-grid-item v-for='(item,index) in list' class=" mb-4" :key="index">
						<view class="flex flex-column flex-center flex-1" @click="$page.open(item.path)">
							<image class="rounded-circle grid-image" :src='item.url'>
							</image>
							<view class="text-dark-light-1 h9 mt-1">{{item.name}}</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { $http, $page } from '@/utils'
	import {  useRefs, useWebConfigStore } from "@/stores";
	//站点信息
	const webConfigStore = useWebConfigStore()
	const { WEBCONFIG } = useRefs(webConfigStore);
	//分销用户信息
	const dealerUser = ref({
		money:0,
		total_money:0,
		freeze_money:0,
		referee_name:'平台'
	})
	onShow(() => {
		getDealerUser()
	})
	const getDealerUser=(()=>{
		$http.get('Dealer/getDealerUser').then(res => {
			if (res.data.length == 0) {
				$page.redirect('/pages/dealer/apply')
			} else {
				dealerUser.value = res.data
			}
		})
	})
	//导航
	const list = ref([{
		name: '提现明细',
		url: '../../static/icon/tixian.png',
		path: '/pages/dealer/withdrawal/list'
	},
	{
		name: '分销订单',
		url: '../../static/icon/dealer_order.png',
		path: '/pages/dealer/order'
	},
	{
		name: '我的团队',
		url: '../../static/icon/team.png',
		path: '/pages/dealer/team'
	}, {
		name: '推广二维码',
		url: '../../static/icon/code.png',
		path: '/pages/dealer/poster'
	}])
</script>

<style>
	.bg {
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.box {
		margin-top: 130rpx;
		position: relative;
	}

	.line {
		width: 100%;
		height: 1px;
		background-color: #dfdfdf;
	}

	.money-box {
		background-color: #8e84fc;
	}

	.btn {
		width: 160rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: #8e84fc;
	}

	.grid-image {
		width: 78rpx;
		height: 76rpx;
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 80rpx;
		position: absolute;
		left: 65%;
		top: -80rpx;
	}
</style>